<template>
  <div class="event-list">
    <h2>我的事件</h2>
    <router-link to="/events/new" class="new-event-btn">新建事件</router-link>
    <div v-if="events.length === 0" class="no-events">暂无事件</div>
    <ul v-else>
      <li v-for="event in events" :key="event.id" class="event-item">
        <router-link :to="`/events/${event.id}`">{{ event.title }}</router-link>
        <span :class="['status', event.status === 1 ? 'completed' : 'pending']">
          {{ event.status === 1 ? '已完成' : '待办' }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      events: []
    }
  },
  async created() {
    try {
      const token = localStorage.getItem('token');
      const response = await fetch('/api/events', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      
      if (response.ok) {
        this.events = await response.json();
      } else {
        this.$router.push('/login');
      }
    } catch (error) {
      console.error('获取事件列表错误:', error);
    }
  }
}
</script>

<style scoped>
.event-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.new-event-btn {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 15px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
.no-events {
  padding: 20px;
  text-align: center;
  color: #666;
}
.event-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.event-item a {
  text-decoration: none;
  color: #333;
}
.status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.status.pending {
  background-color: #ffeb3b;
  color: #333;
}
.status.completed {
  background-color: #4caf50;
  color: white;
}
</style>